let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let cleanWebpackPlugin = require('clean-webpack-plugin');
let copyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack');
let happypack = require('happypack');
// 用来合并webpack配置
let merge = require('webpack-merge');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve('dist')
    },
    // 第三方模块解析规则
    resolve: {
        modules: [path.resolve(__dirname, 'node_modules')],
        // 别名
        alias: {
            'bootstrap': 'bootstrap/dist/css/bootstrap.css'
        },
        // 配置我们的后缀
        extensions: ['.js', '.json', '.css']
    },
    devServer: {
        // app 就是express
        // 可以用来造假数据
        before(app) {
            app.get('/user', (req, res) => {
                res.json({name: 'zeihang'})
            })
        },
        contentBase: 'dist',
        // 只在开发环境种有效
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                pathRewrite: {
                    '/api': ''
                }
            }
        }
    },
    watch: true,
    watchOptions: {
        // 每秒检查一次变动
        poll: 1000,
        //当第一个文件更改，会在重新构建前增加延迟。这段时间内进行的任何其他更改都聚合到一次重新构建里。
        aggregateTimeout: 3000,
        ignored: /node_modules/
    },
    module: {
        // 不解析jquery是否有引其他包
        noParse: /jquery/, 
        rules: [
            {test: /\.css$/, use: 'happypack/loader?id=css'}
        ]
    },
    plugins: [
        // moment有引入local就忽略掉
        new webpack.IgnorePlugin(/\.\/local/, /moment/),
        // 添加子进程来加快带包速度
        new happypack({
            id: 'css',
            use: ['style-loader', 'css-loader']
        }),
        new cleanWebpackPlugin(['./dist']),
        new copyWebpackPlugin([{
            from: './assets',
            to: './'
        }]),
        new webpack.BannerPlugin('make by zeihang in 2019'),
        // 配置全局属性
        new webpack.DefinePlugin({
            DEV: JSON.stringify('development'),
            FLAG: true,
            EXPRESSION: '1+1'
        }),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
        }),
    ]
}